<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css">
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="bgcf">
        <!-- 顶部 -->
        <div class="">
          <div class="pd20 top">
            <div class="flex jcsb">
              <div>logo</div>
              <div>网站名称</div>
              <div @click="topage('./city.html')">切换城市</div>
            </div>
            <h2 class="mgt20">人才库(已迁移至home.html)</h2>
          </div>
          <div class="inputpd">
            <div class="fyInput">
              <div class="flex aic inputLeft">
                <div class="title">网站开发前...</div>
                <span></span>
              </div>
              <van-field type="text" class="iminput text" placeholder="请输入关键词" ></van-field>
              <div class="inputBtn">搜索</div>
            </div>
          </div>
        </div>
        <!-- 关键词 -->
        <div class="pdx20">
          <div class="flex jcsb">
            <span>为您推荐关键词</span>
            <span class="flex aic">换一换
              <div class="mgl10"><van-icon name="replay" /></div>
          </div>
          <div class="spanList flex fww">
            <div v-for="i in tab">
              <span class="atag bge5">{{ i.name }} <b v-if="i.ishot">热</b></span>
            </div>
          </div>
        </div>
        <!-- 筛选 -->
        <div class="spanList pd10 mgl10">
          <div v-for="(i,index) in sx" class="atag" :class="active==index?'cp':'c0'"
          @click="active=index"
            >{{ i }} <div class="tgle" v-if="active==index"></div></div>
        </div>
      </div>
      <div class="mgt10">
        <!-- 求职卡片 -->
        <div class="card" v-for="i in cardList">
          <div class="close"><van-icon name="cross" /></div>
          <div class="flex fs14">
            <div class="navar">
              <div class="sex"><van-icon name="circle" /></div>
            </div>
            <div class="flex column jcsa">
              <div class="name">{{ i.name }}</div>
              <div class="msgSpan">
                <span>{{ i.year }}</span>
                <span>{{ i.xl }}</span>
                <span>{{ i.money }}</span>
                <span>{{ i.age }}</span>
              </div>
            </div>
          </div>
          <!-- 求职详情 -->
          <div class="flex jcsb">
            <div class="fs14">
              <div class="innermsg flex aic">
                <div class="icon"><van-icon name="gift-o" /></div>
                <div class="fwb">{{ i.wantJob }}</div>
              </div>
              <div class="innermsg flex aic">
                <div class="icon"><van-icon name="cart-o" /></div>
                <div class="fwb">{{ i.jobMsg }}</div>
              </div>
              <div class="innermsg flex aic">
                <div class="icon"><van-icon name="gem-o" /></div>
                <div class="fwb">{{ i.want }}</div>
              </div>
            </div>
            <div>
              <div class="c9 fs14">{{ i.wantYear }}</div>
              <div class="c9 fs14">{{ i.wantqix }}</div>
            </div>
          </div>
          <div class="flex jcsb aic">
            <span class="mspan" v-for="j in i.tag">{{ j }}</span>
            <div class="tel flex" v-if="i.isPhone">
              <div><van-icon name="service-o" size="15"/></div>
              <div>可拨打</div>
            </div>
          </div>
          <!-- 个人介绍 -->
          <div class="contxt">{{ i.msg }}</div>
        </div>
        <!-- 暂无更多 -->
        <div class="card">
          <h3 class="mgb20">暂无更多牛人,可尝试搜索以下相似关键词</h3>
          <div class="zugd">
            <span>html</span>
            <span>php后端</span>
          </div>
          <div class="mgb10"></div>
        </div>
      </div>

      <!-- 底部栏  -->
      <div class="safeBottom"></div>
      <van-tabbar class="fot">
        <van-tabbar-item icon="friends">人才</van-tabbar-item>
        <van-tabbar-item icon="search">管理岗位</van-tabbar-item>
        <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
        <van-tabbar-item icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </body>
</html>
<script>
  new Vue({
    el: "#app",
    data: {
      sx: ["离职随时到职", "学历", "经验", "性别", "更多"],
      active: 0,
      tab: [
        { name: "php", ishot: true },
        { name: "java", ishot: true },
        { name: "ooc" },
        { name: "ppl" },
        { name: "java", ishot: true },
        { name: "ooc" },
        { name: "ppl" },
      ],
      cardList: [
        {
          name: "CXX",
          year: "5年",
          xl: "本科",
          money: "4-7k",
          age: "26岁",
          wantJob: "江户川那个小 · 顺丰",
          jobMsg: "马萨卡·后端开发",
          want: "顺丰",
          wantYear: "2019-至今",
          wantqix: "2019-2020",
          tag: ["php"],
          isPhone: true,
          msg: `本人具有水水水水水水水水水水水水水水
        水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
        水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水`,
        },
      ],
    },
    methods: {
      topage(url){
        window.location.href = url
      }
    },
  });
</script>
<style>
  .tgle{
    width: 5px;
    height: 5px;
    background: linear-gradient(45deg, green, green 50%, transparent 50%, transparent 100%);
    transform: rotateY(180deg);
    position: absolute;
    right: 5px;
    bottom: 5px; 
  }
  .bgcf {
    background-color: #fff;
  }
  body{
    background-color: #fafafa;
  }
  .cp {
    color: var(--primary-color);
    /* background-color: aqua; */
  }
  .top {
    background: linear-gradient(rgb(0, 255, 170), rgb(236, 238, 243));
  }
  .inputpd {
    padding: 20px;
  }
  .fyInput {
    display: flex;
    height: 40px;
    border: 1px solid #0fa0e4;
    border-radius: 5px 10px 10px 20px;
    padding-left: 20px;
  }
  .title {
    width: 70px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
  }
  .inputLeft span {
    height: 20px;
    border-right: 2px solid #eee;
    margin-right: 10px;
  }
  .iminput {
    flex: 1;
    border: 1px solid #fff;
    border-radius: 10px;
    z-index: 1000;
  }
  .inputBtn {
    width: 60px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: linear-gradient(rgb(0, 119, 255), rgb(192, 246, 255));
    border-radius: 0 9px 9px 0;
  }
  .refesh {
    margin-left: 8px;
  }
  .spanList {
    margin-top: 10px;
  }
  .bge5{
    background-color: #faf5f5;
  }
  .atag {
    display: inline-block;
    margin: 3px 5px;
    padding: 5px 8px;
    font-size: 14px;
    border-radius: 4px;
    background-color: #eeeeee65;
    position: relative;
  }
  .spanList b {
    padding: 2px;
    font-size: 12px;
    background-color: orange;
    color: #fff;
    border-radius: 3px;
    /* transform: scale(0.6); */
  }
  .pdx20 {
    padding: 0 20px;
  }
  .navar {
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    border-radius: 50px;
    margin-right: 10px;
    position: relative;
  }
  .sex {
    position: absolute;
    font-size: 12px;
    color: #fff;
    background-color: #0fa0e4;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 2px;
    right: 0;
  }
  .card {
    position: relative;
    padding: 10px;
    margin: 0 6px;
  }
  .card:nth-child(2) {
    margin: 10px 10px;
  }
  .card .name {
    font-weight: bold;
    font-size: 18px;
  }
  .msgSpan span {
    padding: 0 5px;
    border-right: 1px solid #eee;
  }
  .msgSpan span:last-child {
    border-right: none;
  }
  .innermsg {
    margin: 5px 10px;
    line-height: 18px;
  }
  .icon {
    font-size: 20px;
    margin-right: 5px;
    color: #999;
  }
  .mspan {
    width: 20px;
    margin: 3px 5px;
    padding: 6px 15px;
    font-size: 0.9rem;
    background-color: #eeeeee65;
    border-radius: 4px;
  }
  .tel {
    font-size: 12px;
    padding: 5px 12px;
    background-color: aquamarine;
    border-radius: 40px;
    color: green;
  }
  .contxt {
    font-size: 13px;
    margin-left: 10px;
    width: 90%;
    margin-top: 3px;
    letter-spacing: 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .close {
    font-size: 18px;
    color: #999;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .zugd span {
    margin-right: 10px;
    padding: 10px;
    border-radius: 7px;
  }
  .zugd :nth-child(1) {
    background-color: #6aee1246;
    color: rgb(38, 196, 32);
  }
  .zugd :nth-child(2) {
    background-color: #eee7e0e8;
    color: rgb(228, 153, 14);
  }
  .safeBottom {
    height: 70px;
  }
  .footer {
    justify-content: space-evenly;
  }
  .footIcon {
    font-size: 25px;
    margin-bottom: 10px;
    position: relative;
  }
  .redCircle {
    position: absolute;
    right: -7px;
    top: -5px;
  }
  @media (min-width:500px) {
    .fot{
      width: 713px;
      left: 24%;
    }
  }
</style>
